<script setup lang="ts">
const emits = defineEmits(['close'])

const close = ()=>{
	emits('close')
}
</script>

<template>
	<div class="success-dialog">
		<div class="dialog-content">
			<img class="close" src="~/assets/modal-close.png" alt="" @click="close">
			<img class="img" src="~/assets/success-img.png" alt="">
			<p class="title">恭喜你创建成功！</p>
			<p class="tips">企业创建成功，您可在企业主页进行人员管理操作等。</p>
			<NuxtLink class="to-link" to="/companyHome">查看企业</NuxtLink>
		</div>
	</div>
</template>

<style scoped lang="scss">
.success-dialog{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(25, 30, 40, .4);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dialog-content{
	width: 400px;
	background: #fff;
	border-radius: 16px 16px 16px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 36px 59px 24px;
	box-sizing: border-box;
	position: relative;
	.close{
		width: 24px;
		height: 24px;
		position: absolute;
		top: 20px;
		right: 20px;
		cursor: pointer;
	}
	.img{
		width: 80px;
		height: 80px;
		margin-bottom: 16px;
	}
	.title{
		color: #191E28;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 8px;
	}
	.tips{
		color: rgba(25,30,40,0.48);
		line-height: 24px;
		text-align: center;
		margin-bottom: 32px;
	}
	.to-link{
		width: 102px;
		height: 36px;
		background: #1DBF73;
		border-radius: 8px 8px 8px 8px;
		text-align: center;
		line-height: 36px;
		color: #fff;
		text-decoration: none;
	}
}
</style>